<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS过渡(Transition)测试案例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .container {
            text-align: center;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            width: 100%;
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
        }

        h2 {
            color: #444;
            margin-top: 30px;
            margin-bottom: 15px;
            border-bottom: 2px solid #ddd;
            padding-bottom: 8px;
        }

        h3 {
            color: #555;
            margin-top: 20px;
        }

        p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: left;
        }

        .test-cases {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .test-case {
            background-color: #f9f9f9;
            border-radius: 6px;
            padding: 15px;
            text-align: center;
        }

        .demo-box {
            width: 120px;
            height: 120px;
            margin: 15px auto;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-radius: 8px;
            cursor: pointer;
            user-select: none;
        }

        .code-section {
            margin-top: 15px;
            background-color: #f0f0f0;
            border-radius: 4px;
            padding: 10px;
            text-align: left;
            overflow-x: auto;
        }

        pre {
            margin: 0;
            font-family: 'Courier New', Courier, monospace;
            font-size: 12px;
            line-height: 1.4;
        }

        code {
            color: #d63384;
        }

        /* 测试案例1：基础过渡效果 */
        .case1 {
            transition: background-color 0.5s ease;
        }

        .case1:hover {
            background-color: #2196F3;
        }

        /* 测试案例2：多属性过渡 */
        .case2 {
            transition: background-color 0.5s ease, transform 0.5s ease;
        }

        .case2:hover {
            background-color: #f44336;
            transform: scale(1.1) rotate(5deg);
        }

        /* 测试案例3：不同持续时间的多属性过渡 */
        .case3 {
            transition: background-color 0.3s ease, transform 1s ease, width 0.5s ease;
        }

        .case3:hover {
            background-color: #ff9800;
            transform: translateY(-10px);
            width: 150px;
        }

        /* 测试案例4：使用all关键字 */
        .case4 {
            transition: all 0.4s ease;
        }

        .case4:hover {
            background-color: #9c27b0;
            transform: scale(0.9) rotate(-5deg);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
        }

        /* 测试案例5：不同的缓动函数 */
        .case5.ease {
            transition: transform 1s ease;
        }

        .case5.linear {
            transition: transform 1s linear;
        }

        .case5.ease-in {
            transition: transform 1s ease-in;
        }

        .case5.ease-out {
            transition: transform 1s ease-out;
        }

        .case5.ease-in-out {
            transition: transform 1s ease-in-out;
        }

        .case5:hover {
            transform: translateX(50px);
        }

        /* 测试案例6：过渡延迟 */
        .case6 {
            transition: transform 0.5s ease 0.3s;
        }

        .case6:hover {
            transform: rotate(360deg);
        }

        /* 测试案例7：悬浮和点击不同过渡 */
        .case7 {
            transition: background-color 0.3s ease;
        }

        .case7:hover {
            background-color: #00bcd4;
        }

        .case7:active {
            transition: transform 0.1s ease;
            transform: scale(0.9);
        }

        /* 测试案例8：自定义贝塞尔曲线 */
        .case8 {
            transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .case8:hover {
            transform: translateY(-30px);
        }

        .case-descriptions {
            text-align: left;
            margin-top: 20px;
        }

        .case-descriptions li {
            margin-bottom: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS过渡(Transition)测试案例</h1>
        <p>本页面展示了CSS过渡效果的各种应用场景和属性组合。过渡效果使元素从一种样式平滑地过渡到另一种样式，而不是立即改变。将鼠标悬停在各个示例上查看效果。</p>

        <div class="test-cases">
            <!-- 测试案例1：基础过渡效果 -->
            <div class="test-case">
                <h3>案例1：基础过渡</h3>
                <div class="demo-box case1">背景色过渡</div>
                <div class="code-section">
                    <pre><code>.case1 {
  transition: background-color 0.5s ease;
}

.case1:hover {
  background-color: #2196F3;
}</code></pre>
                </div>
            </div>

            <!-- 测试案例2：多属性过渡 -->
            <div class="test-case">
                <h3>案例2：多属性过渡</h3>
                <div class="demo-box case2">背景色+变换</div>
                <div class="code-section">
                    <pre><code>.case2 {
  transition: background-color 0.5s ease,
              transform 0.5s ease;
}

.case2:hover {
  background-color: #f44336;
  transform: scale(1.1) rotate(5deg);
}</code></pre>
                </div>
            </div>

            <!-- 测试案例3：不同持续时间的多属性过渡 -->
            <div class="test-case">
                <h3>案例3：不同持续时间</h3>
                <div class="demo-box case3">不同速度的过渡</div>
                <div class="code-section">
                    <pre><code>.case3 {
  transition: background-color 0.3s ease,
              transform 1s ease,
              width 0.5s ease;
}

.case3:hover {
  background-color: #ff9800;
  transform: translateY(-10px);
  width: 150px;
}</code></pre>
                </div>
            </div>

            <!-- 测试案例4：使用all关键字 -->
            <div class="test-case">
                <h3>案例4：使用all关键字</h3>
                <div class="demo-box case4">所有属性过渡</div>
                <div class="code-section">
                    <pre><code>.case4 {
  transition: all 0.4s ease;
}

.case4:hover {
  background-color: #9c27b0;
  transform: scale(0.9) rotate(-5deg);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}</code></pre>
                </div>
            </div>

            <!-- 测试案例5：不同的缓动函数 -->
            <div class="test-case">
                <h3>案例5：不同缓动函数</h3>
                <div class="demo-box case5 ease">ease</div>
                <div class="demo-box case5 linear">linear</div>
                <div class="demo-box case5 ease-in">ease-in</div>
                <div class="demo-box case5 ease-out">ease-out</div>
                <div class="demo-box case5 ease-in-out">ease-in-out</div>
                <div class="code-section">
                    <pre><code>.case5.ease {
  transition: transform 1s ease;
}

.case5.linear {
  transition: transform 1s linear;
}

/* 其他缓动函数类似 */

.case5:hover {
  transform: translateX(50px);
}</code></pre>
                </div>
            </div>

            <!-- 测试案例6：过渡延迟 -->
            <div class="test-case">
                <h3>案例6：过渡延迟</h3>
                <div class="demo-box case6">延迟旋转</div>
                <div class="code-section">
                    <pre><code>.case6 {
  transition: transform 0.5s ease 0.3s;
  /* 0.3s为延迟时间 */
}

.case6:hover {
  transform: rotate(360deg);
}</code></pre>
                </div>
            </div>

            <!-- 测试案例7：悬浮和点击不同过渡 -->
            <div class="test-case">
                <h3>案例7：多种状态过渡</h3>
                <div class="demo-box case7">悬停+点击效果</div>
                <div class="code-section">
                    <pre><code>.case7 {
  transition: background-color 0.3s ease;
}

.case7:hover {
  background-color: #00bcd4;
}

.case7:active {
  transition: transform 0.1s ease;
  transform: scale(0.9);
}</code></pre>
                </div>
            </div>

            <!-- 测试案例8：自定义贝塞尔曲线 -->
            <div class="test-case">
                <h3>案例8：自定义贝塞尔曲线</h3>
                <div class="demo-box case8">弹性效果</div>
                <div class="code-section">
                    <pre><code>.case8 {
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.case8:hover {
  transform: translateY(-30px);
}</code></pre>
                </div>
            </div>
        </div>

        <div class="case-descriptions">
            <h2>CSS过渡属性详解</h2>
            <p>CSS过渡属性允许你控制元素从一种样式平滑过渡到另一种样式的时间和方式。主要包含以下子属性：</p>
            <ul>
                <li><strong>transition-property</strong>：指定要过渡的CSS属性名称，如background-color、transform等，也可以使用all表示所有可过渡的属性。</li>
                <li><strong>transition-duration</strong>：指定过渡效果持续的时间，单位可以是秒(s)或毫秒(ms)。</li>
                <li><strong>transition-timing-function</strong>：指定过渡的缓动函数，控制过渡的速度变化。常见的值有ease、linear、ease-in、ease-out、ease-in-out，以及自定义的cubic-bezier函数。</li>
                <li><strong>transition-delay</strong>：指定过渡效果开始前的延迟时间，单位可以是秒(s)或毫秒(ms)。</li>
            </ul>
            <p>这些属性可以简写为一个transition声明，顺序为：property duration timing-function delay。</p>
        </div>
    </div>
</body>
</html>